/* element 暗黑css */
@use "element-plus/theme-chalk/src/dark/css-vars.scss" as *;
@use './element' as *;

@mixin light {
  --color-bg: #fff;
  --color-text: #303133;
  --main-color-bg: #f7fafc;

  /* 登录页 */
  --login-main-color-bg: rgb(var(--color-primary));
  --login-second-color-bg: #e6e6e6;
  --login-other-color-bg: #fff;

  /* 主题切换按钮 */
  --skinToggle-color-border: #dcdfe6;
  --skinToggle-color-bg: #f2f2f2;

  /* 菜单 */
  --menu-color-text: #444444;
  --menu-color-active-text: rgb(var(--color-primary));
  --menu-color-active-bg: rgba(var(--color-primary-light-3), 0.2);
  --menu-color-hover-text: rgb(var(--color-primary));
  --menu-color-hover-bg: rgba(var(--color-primary-light-5), 0.1);
  --menu-color-bg: var(--color-bg);
  --menu-color-elMenuItemLeft-bg: var(--menu-color-bg);
  --menu-color-subStyle-bg: var(--menu-color-bg);

  /* tag标签 */
  --tag-color-bg: var(--color-bg);
  --tag-color-text: var(--color-text);
  --tag-color-active-text: rgb(var(--color-primary));
  --tag-color-tags-active-bg: rgba(var(--color-primary-light-3), 0.2);
  --tag-color-fusion-active-bg: linear-gradient(to bottom, rgba(var(--color-primary-light-3), 0.2), var(--main-color-bg));
  --tag-color-hover-text: rgb(var(--color-primary));
  --tag-color-tags-hover-bg: rgba(var(--color-primary-light-5), 0.2);
  --tag-color-fusion-hover-bg: linear-gradient(to bottom, rgba(var(--color-primary-light-5), 0.1), var(--main-color-bg));
  --tag-right-menu-bg: var(--color-bg);
  --tag-right-menu-hover-bg: rgba(var(--color-primary-light-5), 0.1);

  /* 面包屑 */
  --breadcrumb-color-text: var(--color-text);
  --breadcrumb-color-hover-text: rgb(var(--color-primary));

  /* 搜索栏 */
  --search-color-bg: var(--main-color-bg);
  --search-color-text: var(--color-text);
  --search-color-term-bg: var(--color-bg);
  --search-color-term-hover-bg: rgb(var(--color-primary));

  /* 顶部header */
  --header-color-bg: var(--color-bg);
  --header-right-color-text: var(--color-text);
  --header-right-color-hover-text: rgb(var(--color-primary));
  --header-right-color-hover-bg: rgba(var(--color-primary-light-3), 0.2);
  --header-menu-color-text: var(--menu-color-text);

  /* element */
  @include element;
}

@mixin dark {
  --color-bg: #141414;
  --color-text: #E5EAF3;
  --main-color-bg: #1d1d1d;

  /* 登录页 */
  --login-main-color-bg: rgb(var(--color-primary));
  --login-second-color-bg: #4a4a4a;
  --login-other-color-bg: #000000c7;

  /* 主题切换按钮 */
  --skinToggle-color-border: #4C4D4F;
  --skinToggle-color-bg: #2c2c2c;

  /* 菜单 */
  --menu-color-text: #c3c3c3;
  --menu-color-active-text: rgb(var(--color-primary));
  --menu-color-active-bg: rgba(var(--color-primary-light-7), 0.3);
  --menu-color-hover-text: rgb(var(--color-primary));
  --menu-color-hover-bg: rgba(var(--color-primary-light-3), 0.1);
  --menu-color-bg: var(--color-bg);
  --menu-color-elMenuItemLeft-bg: var(--menu-color-bg);
  --menu-color-subStyle-bg: var(--menu-color-bg);

  /* tag标签 */
  --tag-color-bg: var(--color-bg);
  --tag-color-text: var(--color-text);
  --tag-color-active-text: rgb(var(--color-primary));
  --tag-color-tags-active-bg: rgba(var(--color-primary-light-7), 0.3);
  --tag-color-fusion-active-bg: linear-gradient(to bottom, rgba(var(--color-primary-light-7), 0.3), var(--main-color-bg));
  --tag-color-hover-text: rgb(var(--color-primary));
  --tag-color-tags-hover-bg: rgba(var(--color-primary-light-3), 0.2);
  --tag-color-fusion-hover-bg: linear-gradient(to bottom, rgba(var(--color-primary-light-3), 0.1), var(--main-color-bg));
  --tag-right-menu-bg: var(--main-color-bg);
  --tag-right-menu-hover-bg: rgba(var(--color-primary-light-3), 0.1);

  /* 面包屑 */
  --breadcrumb-color-text: var(--color-text);
  --breadcrumb-color-hover-text: rgb(var(--color-primary));

  /* 搜索栏 */
  --search-color-bg: var(--main-color-bg);
  --search-color-text: var(--color-text);
  --search-color-term-bg: var(--color-bg);
  --search-color-term-hover-bg: rgb(var(--color-primary));

  /* 顶部header */
  --header-color-bg: var(--color-bg);
  --header-right-color-text: var(--color-text);
  --header-right-color-hover-text: rgb(var(--color-primary));
  --header-right-color-hover-bg: rgba(var(--color-primary-light-3), 0.2);
  --header-menu-color-text: var(--menu-color-text);

  /* element */
  @include element;
}